"use strict";
import * as React from 'react';
const { View, StyleSheet, TouchableOpacity, ImageBackground, ScrollView } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import MyImagePicker from "../../component/MyImagePicker";
import { SCREEN_WIDTH } from "../../constant";
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import Request from "../../utils/Request";
import { toastValidateError } from "../../utils/tools";
const { createForm, createFormField } = require('rc-form');
const { List, InputItem, Picker, Button, TextareaItem } = require('antd-mobile');
const newStyle = {};
let TextAreaStyle = require('antd-mobile/lib/textarea-item/style/index.native');
for (const key in TextAreaStyle) {
    if (Object.prototype.hasOwnProperty.call(TextAreaStyle, key)) {
        newStyle[key] = Object.assign({}, StyleSheet.flatten(TextAreaStyle[key]));
        if (key === 'container') {
            newStyle[key].marginLeft = 0;
            newStyle[key].borderBottomWidth = 0;
            newStyle[key].borderBottomColor = 'transparent';
        }
    }
}
class ShopManagerPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.selectedHeaderImage = () => {
            this.imagePicker.options.pickerOptions.allowsEditing = true;
            this.imagePicker.showImagePicker().then(response => {
                this.setState({ store_img: {
                        uri: response['path'],
                        type: 'application/octet-stream',
                        name: response['fileName']
                    } });
            }).catch(e => {
                console.log(e);
            });
        };
        this.onSave = () => {
            const { dispatch, form } = this.props;
            form.validateFields((error, value) => {
                if (!error) {
                    if (this.state.store_img) {
                        const payload = Object.assign({}, value, { store_img: this.state.store_img });
                        dispatch({
                            type: 'auth/editStore',
                            payload
                        });
                    }
                    else {
                        toastValidateError(null, '店铺图片未选择');
                    }
                }
                else {
                    toastValidateError(error);
                }
            });
        };
        this.renderHeader = () => {
            return (<TouchableOpacity onPress={this.selectedHeaderImage.bind(this, 'store_img')}>
                <ImageBackground style={[commonStyles.centerVH, { width: SCREEN_WIDTH, height: autoSize(SCREEN_WIDTH) }]} source={this.state.store_img ? { uri: this.state.store_img.uri } : { uri: Request.checkImageUrl(this.props.auth.profile.store_image) }}>

                </ImageBackground>
            </TouchableOpacity>);
        };
        this.state = {
            store_img: null
        };
        this.imagePicker = new MyImagePicker();
        this.imagePicker.options.pickerOptions.allowsEditing = true;
        this.imagePicker.options.cropOptions.width = SCREEN_WIDTH;
        this.imagePicker.options.cropOptions.height = autoSize(SCREEN_WIDTH);
    }
    componentDidMount() {
    }
    render() {
        const { getFieldProps } = this.props.form;
        if (!this.props.auth.isSignIn) {
            return null;
        }
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} title={{ title: this.props.title, tintColor: '#fff' }}/>
                <ScrollView>
                    <List renderHeader={this.renderHeader}>

                        <InputItem {...getFieldProps('store_name', {
            initialValue: this.props.auth.profile.store_name,
            rules: [
                { required: true, message: '店铺名称未填写' },
            ]
        })} placeholder='输入店铺名称' clear labelNumber={4}>店铺名称</InputItem>



                        <View style={{ padding: 14 }}>
                            <MyText color={Colors.Black}>店铺介绍</MyText>
                            <View style={{ paddingHorizontal: 20 }}>
                                <View style={{
            borderWidth: 1,
            borderColor: '#d0d0d0',
            borderRadius: 10,
            padding: 5,
            marginTop: 10
        }}>
                                    <TextareaItem {...getFieldProps('description', {
            initialValue: this.props.auth.profile.store_introduced,
            rules: [
                { required: true, message: '店铺介绍未填写' },
            ],
        })} styles={StyleSheet.create(newStyle)} rows={5} count={100}/>
                                </View>
                            </View>
                        </View>

                        <View style={{ padding: 10 }}>
                            <Button type={'primary'} style={{ height: 35 }} loading={this.props.auth.loading} disabled={this.props.auth.loading} onClick={this.onSave}>保存</Button>
                        </View>
                    </List>
                </ScrollView>
            </View>);
    }
}
const Wrapper = createForm()(ShopManagerPage);
export default connect(({ auth }) => ({ auth }))(Wrapper);
